<template>
  <div>
    <el-row :gutter="10" center class="monitor">
      <div class="backBeforepage">
        <el-button type="text" icon="el-icon-caret-left" @click="prev">上一页</el-button>
      </div>
      <el-col :span="6" :offset="1">物理位置监控可视化操作界面</el-col>
      <el-col :span="8" :offset="2">新增底图</el-col>
    </el-row>
    <el-card>
      <div class="uploadContent">
        <el-form size="mini" ref="form1" :model="ImgForm" :rules="rules" label-width="140px" label-position="left">
          <el-row :gutter="10">
            <!-- <el-col :span="10">
                   <el-form-item label="图片名称"  prop="uploadFileName">
                     <el-input type="text" class="showFileName"  v-model="ImgForm.uploadFileName" placeholder="导入图片名称" value=""></el-input>
                  </el-form-item>
                </el-col> -->
            <el-col :span="10">
              <el-form-item label="图片文字描述" prop="uploadFileDecsription">
                <el-input type="text" class="showFileName" v-model="ImgForm.uploadFileDecsription"
                  placeholder="请先输入图片文字描述" value=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="2">
              <el-button style="margin-left: 10px;" type='warning' size='mini' icon='el-icon-refresh'
                @click="clearForm('form1')">重置</el-button>
            </el-col>
            <el-col :span="4">
              <el-button style="margin-left: 10px;" size="mini" type="success" @click="submitUpload">图片新增</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-upload ref="upload" class="uploadStyle" :action=fileUploadUrl :auto-upload='false' :limit="1"
              list-type="picture-card" :on-remove="handleRemove" :on-preview="handlePictureCardPreview"
              :on-change="handleChange" :before-upload="handleBeforeUpload">
              <i class="el-icon-plus"></i>
              <!-- <el-button size="mini" type="success" @click="submitUpload">图片新增</el-button> -->


            </el-upload>
          </el-col>


        </el-row>
      </div>
      <div class="imgL" v-if="Visible">
        <img width="1400px" height="813px" :src="dialogImageUrl" alt="图片预览">
      </div>

    </el-card>

  </div>
</template>

<script>
  // import {VueCropper} from "vue-cropper";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import requestYg from "@/common/utils/requestYg";

  import addBackgroundImage from "@/message/siteManagement/workplacemonitoring/addBackgroundImage";


  export default {
    name: '',
    data() {
      return {
        Visible: false,
        fileUploadUrl: '',
        dialogImageUrl: '',
        ImgForm: {
          uploadFileName: '',
          uploadFileDecsription: '',
        },
        uploadFileMsg: {},
        // form1:{

        // },
        rules: {
          uploadFileDecsription: [{
            required: true,
            message: "图片文字描述必填",
            trigger: "blur"
          }],
          uploadFileName: [{
              required: true,
              message: "图片名称必须输入",
              trigger: "blur"
            }

          ]
        }



      };
    },

    computed: {},
    created: function () {

    },
    watch: {},
    mounted() {
      console.log("mounted");
      this.fileUploadUrl = getGlobalParams.get("BackgroundImgUploadUrl");
    },
    methods: {

      handleChange(file, fileList) {
        console.log("change,", file, fileList);
        this.ImgForm.uploadFileName = file.name;
        this.dialogImageUrl = URL.createObjectURL(file.raw);
        console.log("this.dialogImageUrl,", this.dialogImageUrl);

      },
      handleRemove(file, fileList) {
        console.log("remove,", file, fileList);
        this.dialogImageUrl = '';
        this.ImgForm.uploadFileName = '';
        this.ImgForm.uploadFileDecsription = '';
        this.Visible = false;
        console.log("ImgForm,", this.ImgForm);
        console.log("预览地址：", this.dialogImageUrl);


      },
      handlePictureCardPreview(file) {
        console.log("preview");
        this.dialogImageUrl = file.url;
        console.log("handlePictureCardPreview--file.url", file.url, file);
        this.Visible = true;
      },
      handleBeforeUpload(file) {
        console.log("handleBeforeUploadFile,", file);
        console.log("file.type,", file.type);
        console.log("this.fileUploadUrl,", this.fileUploadUrl);
        // if(!imgType){
        //   this.$message({
        //       message: '图片只能是jpg,png,img',
        //       type: 'error'
        //     });
        //     return false

        // }   //   this.$message({
        //       message: '图片只能是jpg,png,img',
        //       type: 'error'
        //     });
        //     return false

        // }

        if (!this.ImgForm.uploadFileDecsription) {
          this.$message({
            message: '请输入图片文字描述!',
            type: 'error'
          });
          return false
        }

      },
      submitUpload() {

        this.$refs["form1"].validate(valid => {
          if (valid) {
            console.log("valid,", valid);
            let resBody = new addBackgroundImage();
            console.log(resBody);
            resBody.data.oper_type = 'A';
            resBody.data.IMAGEDESC = this.ImgForm.uploadFileDecsription; //文字描述
            resBody.data.IMAGENAME = this.ImgForm.uploadFileName;

            console.log("resBody.data,", resBody.data);

            requestYg(resBody)
              .then(response => {
                console.log("图片新增response", response);
                if (response.SYS_HEAD.ReturnCode === "000000") {

                  this.loading = false;
                  this.$message({
                    type: "success",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                  //上传服务器
                  console.log("this.$refs.upload,", this.$refs.upload);
                  this.$refs.upload.submit();


                } else {
                  this.loading = false;
                  this.$message({
                    type: "waring",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                }
              })
              .catch(error => {
                this.loading = false;
              });

          } else {
            this.$message({
              type: "warning",
              message: "图片信息必须填写完整！"
            });
            return false;
          }
        })
      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
        console.log("重置后的ImgForm,", this.ImgForm);

      },


      prev() {
        console.log("返回上一页");
        this.$router.go(-1);

      }








    }
  };

</script>

<style lang="scss" scoped>
  .monitor {
    width: 100%;
    height: 35px;
    line-height: 33px;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    color: #208cf0;
    padding: 0px 35px;
    text-align: center;
  }

  .physical_title {
    color: #208cf0;
    padding: 0;
    margin: 0;
    // border-bottom: 1px solid #e5e5e5;
    line-height: 30px;
    margin-bottom: 5px;
  }

  .backBeforepage {
    display: inline-block;
    left: 10px;
    position: absolute;
  }

  .el-card {
    width: 100%;
    overflow: inherit;
  }

  .imgL {
    width: 1400px;
    height: 813px;
    border: 1px solid black;
  }


  .uploadContent {
    width: 100%;
    margin-top: 0px;
    // text-align: center;
    // border:1px solid red;
    padding-bottom: 10px;

  }

  .showFileName {
    width: 200px;
    height: 46px;
    text-align: center;
  }

  .showFileName .el-input__inner {
    height: 40px;
  }

  .uploadStyle {
    display: inline-block;
  }

</style>
